<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="utf-8">
    <title th:text="${article.articleTitle}">文章详情</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <!--导入layui-->
    <link rel="stylesheet" th:href="@{/ajax/libs/layui-v2.6.8/layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{/css/article/css/style.css}">
    <style>
        *{ margin:0; padding:0; list-style:none;outline-style: none;}
        body{ background:#f4f4f4;}
        .w500{
            width: 722px;
            height: auto;
            margin: 0 auto;
            overflow: hidden;
        }
        .list li{
            padding:10px 0;
            border-bottom:1px solid #ccc;
            overflow: hidden;
            line-height: 180%;
        }
        .send{
            padding:10px 0;
            position: relative;
        }
        .send textarea{
            width: 97%;
            border-radius:5px;
            padding: 5px}
        .send a.btn{
            position: absolute;
            right: 20px;
            bottom: 20px;
            padding:5px 20px;
            display: block;
            color: #fff;
            background: #07C160;
            border-radius: 3px;
            text-decoration: none;
            font-size: 14px;
            font-weight: bold;
            float: left;
            margin-top: 5px;
        }
        .send a.btn:hover{
            background: #07C160;
            -webkit-transition:all 0.2s linear;
            -moz-transition:all 0.2s linear;
            -ms-transition:all 0.2s linear;
            -o-transition:all 0.2s linear;
            transition:all 0.2s linear;
        }
        .send .faces{
            position: absolute;
            right: 98px;
            bottom: 20px;
            width: 25px;
            height:25px;
            display: block;
            float: right;
            background-image: url(/img/face/faces.png) ;
            background-position: 0 0;
            margin-right:5px;
            margin-top:5px;
        }
        .send .on{
            background-position: left bottom;
        }
        .face{
            overflow: hidden;
            display: none;}
        .face li{
            width: 22px;
            height: 22px;
            margin:3px;
            float: left;
        }
        #content {
            width: 700px;
            height: 90px;
            float: left;
            border: 1px solid #07C160;
            background-color: #fff;
            border-radius: 5px;
            padding: 3px 10px;
            overflow-y:auto;
        }
        .comment-rm{
            display: none;
        }
        .comment-list li:hover .comment-rm{
            display: block;
        }
        .comment-list li{
            padding: 20px;
        }

        .comment-list li:hover{
            background-color: #E4E4E4;
        }
        /** 遮罩层 **/
        .loaderbox {
            display: inline-block;
            min-width: 125px;
            padding: 10px;
            margin: 0 auto;
            color: #000 !important;
            font-size: 13px;
            font-weight: 400;
            text-align: center;
            vertical-align: middle;
            border: 1px solid #ddd;
            background-color: #eee;
            -webkit-border-radius: 2px;
            -moz-border-radius: 2px;
            -ms-border-radius: 2px;
            -o-border-radius: 2px;
            border-radius: 2px;
            -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
            -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
            box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
        }
        .loaderbox .loading-activity {
            float: left;
            width: 18px;
            height: 18px;
            border: solid 2px transparent;
            border-top-color: #000;
            border-left-color: #000;
            border-radius: 10px;
            -webkit-animation: pace-spinner 400ms linear infinite;
            -moz-animation: pace-spinner 400ms linear infinite;
            -ms-animation: pace-spinner 400ms linear infinite;
            -o-animation: pace-spinner 400ms linear infinite;
            animation: pace-spinner 400ms linear infinite;
        }
        @media (max-width: 767px) {
            .loading-activity {
                width: 18px;
                height: 18px;
            }
        }

        @-ms-keyframes pace-spinner {
            0% {
                -ms-transform: rotate(0deg);
                transform: rotate(0deg);
            }

            100% {
                -ms-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }

        @keyframes pace-spinner {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }
        /*转圈动画结束*/
    </style>
</head>
<body>
    <br>
    <br>
    <div class="layui-container">
        <div class="layui-row">
            <div class="layui-col-md8 layui-col-md-offset2">
                <h1 class="title" th:text="${article.articleTitle}">独家 | VIPKID总裁张月佳离职，真正的灵魂人物走了</h1>
                <div style="margin-bottom: 22px; line-height: 20px;" >
                    <span th:if="${article.articleType==0}" class="article-type">原创</span>
                    <span th:if="${article.articleType==1}" class="article-type">转载</span>
                    <span class="article-user"><a th:href="${'/system/user/home/'+publish.userId}" target="_blank" th:text="${publish.userName==null}?${publish.loginName}:${publish.userName}">发布者</a></span>
                    <em th:if="${article.articleUpdatetime==null}" class="article-publish-time" th:text="${#dates.format(article.articleNewstime, 'yyyy-MM-dd HH:mm:ss')}">时间</em>
                    <em th:if="${article.articleUpdatetime!=null}" class="article-publish-time" th:text="${#dates.format(article.articleUpdatetime, 'yyyy-MM-dd HH:mm:ss')+' 修改'}">时间</em>

                    <a href="/" class="article-from"><em style="font-style: normal;color: rgba(0,0,0,.3);margin: 0 10px 10px 0;font-size: 14px;">From&nbsp;:&nbsp;TaskSupervision</em></a>
                </div>
                <!--文章分类-->
<!--                <div class="article-key-words">-->
<!--                    <div class="article-tag-card__title">关键词</div>-->
<!--                    <div class="article-tags">-->
<!--                        &lt;!&ndash;可以根据关键词搜索同类文章&ndash;&gt;-->
<!--                        <a href="" class="key-words">#Java</a>-->
<!--                    </div>-->
<!--                </div>-->
                <!--文章封面-->
                <div class="article-thumbnail">
                    <img th:src="${article.articleThumbnail}" alt="文章封面">
                </div>
                <br>
                <br>
                <div>
                    <strong style="font-size: 13px;letter-spacing: 0.5px;">作者</strong> <span style="font-size: 13px; letter-spacing: 0.5px;" th:text="'&nbsp;|&nbsp;'+${article.articleAuthor}">李华</span>
                </div>
                <div>
                    <strong style="font-size: 13px;letter-spacing: 0.5px;">编辑</strong> <span style="font-size: 13px; letter-spacing: 0.5px;" th:text="'&nbsp;|&nbsp;'+${article.articleEdit}">李华</span>
                </div>
                <br>
                <br>
                <div th:utext="${article.articleContent}">具体内容</div>
<!--                <br>-->
<!--                <hr>-->
            </div>
        </div>
    </div>

    <br>
    <br>
    <!--评论-->
    <div class="comment-box" style="z-index: 99">
        <div class="layui-container" th:if="${article.articleComment==0}">
            <div class="layui-row">
                <div class="layui-col-md7 layui-col-md-offset2">
                    <br>
                    <br>
                    <div class="comment-event" style="z-index: 9999">写下你的评论</div>
                    <!--评论框-->
                    <!--<div class="list w500"></div>-->
                    <div class="send w500" style="display: none;">
                        <div  id="content" cols="30" rows="5" contenteditable="true" ></div>
                        <a href="javascript:;" class="btn">发布</a>
                        <a href="javascript:;" class='faces'></a>
                    </div>
                    <div class="face w500"></div>
                    <br>
                    <div style="color: #CDCCCD;font-size: 14px;">评论</div>
                    <br>
                    <!--评论内容-->
                    <div class="comment-content">
                        <ul class="comment-list" id="comment-list">
<!--                            <li style="height: 100px" th:each="comment:${comments}">-->
<!--                                <div style="position: relative;">-->
<!--                                    <span style="position: absolute;width: 35px;height: 35px">-->
<!--                                        <img style="width: 100%;height: 100%;" th:src="${comment.userAvatar}" alt="头像">-->
<!--                                    </span>-->
<!--                                     <span style="position: absolute;left: 45px;top: -3px">-->
<!--                                        <div style="color: #CDCCCD;font-size: 14px;padding-bottom: 5px" th:text="${comment.userName+'&nbsp;&nbsp;'+ #dates.format(comment.commentTime, 'yyyy-MM-dd HH:mm:ss')}">娱乐明星</div>-->
<!--                                        <div style="font-size: 15px;width: 620px;overflow: hidden;word-break:break-all;" th:utext="${comment.comment}"></div>-->
<!--                                    </span>-->
<!--                                    <span class="comment-rm"  th:id="${'commentId-'+comment.id}" style="position: absolute;right: 10px;top: -3px;color: #0D8BBD;font-size: 13px;cursor:pointer;"  th:if="${user!=null&&user.userId==comment.userId}">删除</span>-->
<!--                                </div>-->
<!--                            </li>-->
                        </ul>
                    </div>
                    <br>
                    <br>
                    <br>
                    <br>
                </div>
            </div>
        </div>
    </div>
    <script th:src="@{/js/jquery.min.js?v=3.6.0}"></script>
    <script th:src="@{/js/bootstrap.min.js?v=3.3.7}"></script>
    <script th:src="@{/ajax/libs/layer/layer.min.js?v=3.5.1}"></script>
    <!--导入layui	-->
    <script th:src="@{/ajax/libs/layui-v2.6.8/layui/layui.js}"></script>
    <!--遮罩层，转圈圈，加载中-->
    <script th:src="@{/ajax/libs/blockUI/jquery.blockUI.js?v=2.70.0}"></script>
    <script th:inline="javascript">
        var article = [[${article}]]
        var user = [[${user}]]
        layui.use('flow', function(){
            var $ = layui.jquery; //不用额外加载jQuery，flow模块本身是有依赖jQuery的，直接用即可。
            var flow = layui.flow;
            var util = layui.util;
            flow.load({
                elem: '#comment-list' //指定列表容器
                ,done: function(page, next){ //到达临界点（默认滚动触发），触发下一页
                    var lis = [];
                    //以jQuery的Ajax请求为例，请求下一页数据（注意：page是从2开始返回）
                    var url = "/system/comment/list";
                    var data={
                        pageSize: 10,
                        pageNum: page,
                        isAsc: 'desc',
                        orderByColumn:'commentTime',
                        // isDesc:'desc'
                        articleId:article.id
                    }
                    var config = {
                        url: url,
                        type: "post",
                        dataType: "json",
                        data: data,
                        beforeSend: function () {

                        },
                        success: function(result) {
                            if (result.code===0){
                                //假设你的列表返回在data集合中
                                layui.each(result.rows, function(index, item){
                                    var timeAgoStr=util.timeAgo(new Date(item.commentTime))
                                    if (user!=null&&user.userId==item.userId){
                                        lis.push('<li style="height: 100px" >\n' +
                                            '    <div style="position: relative;">\n' +
                                            '       <span style="position: absolute;width: 35px;height: 35px">\n' +
                                            '             <img style="width: 100%;height: 100%;" src="'+item.userAvatar+'" alt="头像">\n' +
                                            '       </span>\n' +
                                            '       <span style="position: absolute;left: 45px;top: -3px">\n' +
                                            '           <div style="color: #CDCCCD;font-size: 14px;padding-bottom: 5px">'+item.userName+'&nbsp;&nbsp;'+timeAgoStr+'</div>\n' +
                                            '           <div style="font-size: 15px;width: 620px;overflow: hidden;word-break:break-all;">'+item.comment+'</div>\n' +
                                            '       </span>\n' +
                                            '       <span class="comment-rm" onclick="deleteComment('+item.id+')"  id="commentId-'+item.id+'" style="position: absolute;right: 10px;top: -3px;color: #0D8BBD;font-size: 13px;cursor:pointer;">删除</span>\n' +
                                            '    </div>\n' +
                                            '</li>');
                                    }else {
                                        lis.push('<li style="height: 100px" >\n' +
                                            '    <div style="position: relative;">\n' +
                                            '       <span style="position: absolute;width: 35px;height: 35px">\n' +
                                            '             <img style="width: 100%;height: 100%;" src="'+item.userAvatar+'" alt="头像">\n' +
                                            '       </span>\n' +
                                            '       <span style="position: absolute;left: 45px;top: -3px">\n' +
                                            '           <div style="color: #CDCCCD;font-size: 14px;padding-bottom: 5px">'+item.userName+'&nbsp;&nbsp;'+timeAgoStr+'</div>\n' +
                                            '           <div style="font-size: 15px;width: 620px;overflow: hidden;word-break:break-all;">'+item.comment+'</div>\n' +
                                            '       </span>\n' +
                                            '    </div>\n' +
                                            '</li>');
                                    }
                                });
                                //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                                //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                                next(lis.join(''), page < result.total/10);
                            }else {
                                layer.open({
                                    title: '系统提示'
                                    ,content: '加载失败，请稍后再试！！！'
                                    ,yes: function(){
                                        layer.closeAll();
                                    }
                                });
                            }
                        }
                    };
                    $.ajax(config)
                }
            });
        });
        $(function(){
            var lanren = {
                face:function(_this){
                    var target = $(_this).html();
                    if(target.length < 5){
                        $(_this).html("<img src='/img/face/face/"+target+".gif' />")
                    }
                },
                faceimg:'',
                imgs:function(min,max){
                    for(i=min;i<max;i++){  //通过循环创建60个表情，可扩展
                        lanren.faceimg+='<li><a href="javascript:void(0)"><img src="/img/face/face/'+(i+1)+'.gif" face="<emt>'+(i+1)+'</emt>"/></a></li>';
                    };
                },
                cur:0
            }
            $('.list li emt').each(function(){
                lanren.face(this);
            });
            $('.comment-event').on('click',function () {
                // console.log("评论")
                $('.send').show();
                $('.comment-event').hide();
                $('#content').focus();
            })
            //发布按钮
            $('.send a.btn').on('click',function(){
                var user = [[${user}]];
                if (user==null){
                    layer.open({
                        title: '系统提示'
                        ,content: '请先登录'
                        ,yes: function(){
                            layer.closeAll();
                            location.assign("/login");
                        }
                    });
                } else {
                    if ($('#content').text().length>100){
                        layer.open({
                            title: '系统提示'
                            ,content: '字数不能超过100'
                            ,yes: function(){
                                layer.closeAll();
                            }
                        });
                    }else {
                        var a = $('#content').html();
                        a = a.replace(/<img src="\/img\/face\/face\/(\d+?)\.gif">/g, "{:$1}")//要显示的
                        var messageBody = a.replace(/\{\:(\d+?)}/g,"<img src='\/img\/face\/face\/$1\.gif'>");//要提交的
                        if(!a){
                            layer.open({
                                title: '系统提示'
                                ,content: '内容不能为空'
                                ,yes: function(){
                                    layer.closeAll();
                                }
                            });
                            $('#content').focus();
                            return false;
                        }
                        //打开遮罩层
                        $.blockUI({ message: '<div class="loaderbox"><div class="loading-activity"></div>正在处理中，请稍候...</div>' });
                        var userAvatar = (user.avatar==null)?"/img/user.png":user.avatar;
                        var userName = (user.userName==null)?user.loginName:user.userName;
                        Date.prototype.Format = function(fmt){
                            var o = {
                                "M+": this.getMonth()+1,
                                "d+": this.getDate(),
                                "H+": this.getHours(),
                                "m+": this.getMinutes(),
                                "s+": this.getSeconds(),
                                "S+": this.getMilliseconds()
                            };

                            //因位date.getFullYear()出来的结果是number类型的,所以为了让结果变成字符串型，下面有两种方法：

                            if(/(y+)/.test(fmt)){
                                //第一种：利用字符串连接符“+”给date.getFullYear()+""，加一个空字符串便可以将number类型转换成字符串。

                                fmt=fmt.replace(RegExp.$1,(this.getFullYear()+"").substr(4-RegExp.$1.length));
                            }
                            for(var k in o){
                                if (new RegExp("(" + k +")").test(fmt)){

                                    //第二种：使用String()类型进行强制数据类型转换String(date.getFullYear())，这种更容易理解。

                                    fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(String(o[k]).length)));
                                }
                            }
                            return fmt;
                        }
                        var util = layui.util;
                        var nowDate = util.timeAgo(new Date())
                        var comment =
                            '<li style="height: 100px">\n' +
                            '    <div style="position: relative;">\n' +
                            '        <span style="position: absolute;width: 35px;height: 35px">\n' +
                            '            <img style="width: 100%;height: 100%;"  src="'+userAvatar+'" alt="头像">\n' +
                            '        </span>\n' +
                            '        <span style="position: absolute;left: 45px;top: -3px">\n' +
                            '            <div style="color: #CDCCCD;font-size: 14px;padding-bottom: 5px">'+userName+'&nbsp;&nbsp;'+nowDate+'</div>\n' +
                            '            <div style="font-size: 15px;width: 620px;overflow: hidden;word-break:break-all;">'+messageBody+'</div>\n' +
                            '        </span>\n' +
                            '    </div>\n' +
                            '</li>';
                        // 将评论插入数据库
                        var url = "/system/comment/add";
                        var article=[[${article}]];
                        var data={
                            articleId: article.id,
                            userId:user.userId,
                            userName:userName,
                            userAvatar:userAvatar,
                            comment:messageBody,
                        }
                        var config = {
                            url: url,
                            type: "post",
                            dataType: "json",
                            data: data,
                            beforeSend: function () {

                            },
                            success: function(result) {
                                if (result.code===0){
                                    //发布成功
                                    $('.comment-list').prepend(comment);
                                    $('#content').html('');
                                    $('.send').hide();
                                    $('.comment-event').show();
                                    //关闭遮罩层
                                    setTimeout(function(){
                                        $.unblockUI();
                                    }, 50);
                                }else {
                                    $.unblockUI();
                                    layer.open({
                                        title: '系统提示'
                                        ,content: '评论失败'
                                        ,yes: function(){
                                            layer.closeAll();
                                        }
                                    });
                                }
                            }
                        };
                        $.ajax(config)
                    }
                }
            });
            $('.send .faces').on('click',function(){
                if(lanren.cur == 0){
                    $(this).addClass('on');
                    lanren.cur =1;
                    $('.face').show(0);
                }else if(lanren.cur == 1){
                    $(this).removeClass('on');
                    $('.face').hide(0);
                    lanren.cur =0;
                }
            })
            lanren.imgs(0,60);
            $('.face').append(lanren.faceimg);
            $('.face li img').on('click',function(){
                var target = $(this).attr('face');
                var num = target.replace("<emt>", "");
                num = num.replace("</emt>", "");
                var pre = $('#content').html();//可以作为显示用
                var showimg = '<img src="/img/face/face/'+num+'.gif">';
                $('#content').html(pre+showimg);
                $(this).parents('.face').hide(0);
                $('.send .faces').removeClass('on');
                lanren.cur =0;
            })
        })
        function deleteComment(id){
            layer.open({
                title: '系统提示'
                ,content: '是否删除评论'
                ,yes: function(){
                    var url = "/system/comment/remove";
                    var data={
                        ids:id
                    }
                    var config = {
                        url: url,
                        type: "post",
                        dataType: "json",
                        data: data,
                        beforeSend: function () {

                        },
                        success: function(result) {
                            if (result.code===0){
                                $('#commentId-'+id).parent().parent().hide()
                                layer.closeAll();
                            }else {
                                layer.open({
                                    title: '系统提示'
                                    ,content: '删除失败'
                                    ,yes: function(){
                                        layer.closeAll();
                                    }
                                });
                            }
                        }
                    };
                    $.ajax(config)
                }
            });
        }
    </script>
</body>
</html>